<template id='Application'>
  <div class="Application">
    <top-bar :isClick="isClick" />
    <div class="main">
      <!-- <div class="title1"></div>
        <div class="text1">{{ path1.text1 }}</div> -->
      <swiper
        class="path1"
        v-if="backgroundList"
        :options="swiperOption"
        ref="mySwiper"
      >
        <swiper-slide v-for="(slide, key) in backgroundList" :key="key">
          <div align="center">
            <b-img :src="slide.img" fluid></b-img>
          </div>
        </swiper-slide>
      </swiper>
      <!-- <div class="point3"></div> -->

      <div class="path2">
        <div class="bg2">
          <div class="appform">
            <div
              class="formItem"
              v-for="(item, index) in tableList"
              :key="index"
              @mouseover="selectStyle(index)"
              @mouseout="outStyle(index)"
              @click="goToDetail(item)"
            >
              <div class="content">
                <div class="formLeft">
                  <b-img :src="item.cover_img" fluid></b-img>
                </div>
                <div class="formCenter" :class="{ initHover: isInit }">
                  <div class="title">{{ item.title }}</div>
                  <div class="desc">{{ item.desc }}</div>
                </div>
                <div class="formRight">
                  <b-img :src="path1.right" fluid></b-img>
                </div>
              </div>
            </div>
            <div class="page">
              <div class="totalPage">
                total <span>{{ rows }}</span> items
              </div>
              <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                align="center"
                :hide-goto-end-buttons="true"
                @change="chosePage"
              >
              </b-pagination>
              <div class="toPage">
                <span>Go to</span>
                <input
                  type="text"
                  class="goInput"
                  placeholder="Page"
                  v-model="pageNumber"
                  @keyup.enter="goToPage"
                />
                <button class="btn" type="button" @click="goToPage">Go</button>
              </div>
            </div>
          </div>
          <div class="detail">
            <template v-for="(item, index) in tableList">
              <div
                class="imgs"
                v-if="currentHover == index"
                :key="index"
                :class="[{ isShowImgs: currentHover == index }]"
              >
                <div
                  class="imgitem"
                  v-for="(element, location) in item.imgs"
                  :key="location"
                >
                  <b-img :src="element" fluid></b-img>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
import { isPositiveInteger, iscode } from "../../tools/index";
import {
  getGameListApi,
  getGameBannerApi,
  getBackgroundApi,
} from "../../assets/api/index";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "Application",
  components: {
    BottomBar,
    TopBar,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      vm: "",
      background: "",
      backgroundList: [],
      currentLink: -1,
      isInit: true,
      pageNumber: "",
      rows: 1,
      perPage: 6,
      currentPage: 1,
      currentHover: 0,
      isClick: 3,
      path1: {
        text1:
          "tand-alone Chains Accelerate Game Ecology Middleware Energizes the Reform of Chain Game",
        right: require("../../assets/images/application/right.png"),
      },
      appList: [],
      tableList: [],
      screenWidth: 0,
      swiperList: [],
      swiperOption: {
        speed: 1200,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        spaceBetween: 0,
        grabCursor: true,
        initialSlide: 0,
        loop: true,
        preventLinksPropagation: false,
        on: {
          click: function (swiper) {},
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  watch: {},
  methods: {
    async getBackground() {
      let result = await getBackgroundApi();
      if (iscode(result)) {
        this.background = result.data.path;
      }
    },
    async getGameBanner() {
      let result = await getGameBannerApi();
      if (iscode(result)) {
        this.backgroundList = result.data.list;
      }
    },
    async getGameList() {
      let result = await getGameListApi({
        lang: "en",
        page: this.currentPage,
        pagesize: this.perPage,
      });
      if (iscode(result)) {
        this.rows = result.data.count;
        this.tableList = result.data.list;
      }
    },
    selectStyle(item) {
      this.isInit = false;
      this.currentHover = item;
    },
    outStyle(item) {
      this.currentHover = -1;
    },
    clickLink(index) {
      this.currentLink = index;
    },
    goToPath(item) {
      if (item.path) {
        window.location.href = item.path;
      }
    },
    goToDetail(item) {
      this.$router.push({
        path: "/gameDetail",
        query: {
          id: item.id,
        },
      });
    },
    chosePage(e) {
      this.currentPage = e;
      this.getGameList();
    },
    goToPage() {
      if (this.pageNumber) {
        if (isPositiveInteger(this.pageNumber) && this.pageNumber != 0) {
          let totalPage = parseInt(this.rows / 6);
          if (this.rows % 6 > 0) {
            totalPage++;
          }
          if (this.pageNumber <= totalPage) {
            this.currentPage = this.pageNumber;
            this.getGameList();
          }
          this.pageNumber = "";
        } else {
          this.pageNumber = "";
        }
      }
      //   this.pageNumber = currentPage;
    },
    getWidth() {
      this.screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
      if (this.screenWidth <= 480) {
        // this.swiperOption.slidesPerView = 4;
        // this.swiperOption.slidesPerGroup = 4;
        // this.swiperOption.spaceBetween = 5;
      } else {
        // this.swiperOption.slidesPerView = 5;
        // this.swiperOption.slidesPerGroup = 5;
      }
    },
  },

  created() {
    // this.getWidth();
  },

  mounted() {
    let that = this;
    this.$refs.mySwiper.$swiper.on("click", function () {
      that.goToPath(that.backgroundList[this.realIndex]);
    });
    this.getGameBanner();
    this.getGameList();
    this.getBackground();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.Application {
  background-color: #000;
  user-select: none;
  padding-top: 128px;
  .main {
    .path1 {
      // background: url("../../assets/images/application/bg1.png");
      width: 100%;
      height: 950px;
      // display: flex;
      // flex-direction: column;
      // align-items: flex-start;
      .title1 {
        background: url("../../assets/images/application/ddc34.png");
        background-size: 100% 100%;
        width: 398px;
        height: 142px;
        // margin-top: 371px;
        margin-top: 500px;
        margin-left: -36px;
      }
      .text1 {
        width: 599px;
        font-size: 26px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 51px;
      }
      .apps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        padding: 5px 0;
        img {
          height: 156px;
          width: 274px;
        }
        .isClickLink {
          -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
        }
        // .linkItem:first-child {
        //
        // }
        img:hover {
          -webkit-animation: pulsate-bck 2s ease-in-out infinite both;
          animation: pulsate-bck 2s ease-in-out infinite both;
          @-webkit-keyframes pulsate-bck {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
              box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
              opacity: 1;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              opacity: 0.8;
            }
          }
          @keyframes pulsate-bck {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
              box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
              opacity: 1;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              opacity: 0.8;
            }
          }
        }
      }
      .point3 {
        background: url("../../assets/images/index/point3.png");
        background-size: 100% 100%;
        width: 75px;
        height: 39px;
        margin: 10px auto 0 auto;
      }
    }
    .path2 {
      padding: 15px;
      margin: -80px 244px 0 244px;
      // background: url("../../assets/images/application/bg2.png");
      background-size: 100% 100%;
      z-index: 9;
      position: relative;
      .bg2 {
        // height: 1267px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .appform {
          background: #000;
          padding: 21px;
          flex: 1;
          margin-right: 20px;
          border-radius: 20px;
          .formItem {
            cursor: pointer;
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 21px;
            color: #ffffff;
            .content {
              display: flex;
              align-items: center;
              justify-content: space-between;
              background-color: #161616;
              border-radius: 20px;
              height: 190px;
              flex: 1;
              .formLeft {
                margin-left: 20px;
                img {
                  width: 170px;
                  height: 100px;
                }
              }
              .formCenter {
                margin-left: 20px;
                margin-right: auto;
                padding: 5px 0;
                .title {
                  font-size: 26px;
                  font-weight: 600;
                }
                .desc {
                  width: 850px;
                  font-size: 20px;
                  font-weight: 500;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
              .formRight {
                margin-right: 30px;
                -webkit-animation: shake-horizontal 6s
                  cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
                animation: shake-horizontal 6s
                  cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
                @-webkit-keyframes shake-horizontal {
                  0%,
                  100% {
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                  }
                  10%,
                  30%,
                  50%,
                  70%,
                  90% {
                    -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
                  }
                  20%,
                  40%,
                  60%,
                  80% {
                    -webkit-transform: translateX(5px);
                    transform: translateX(5px);
                  }
                }
                @keyframes shake-horizontal {
                  0%,
                  100% {
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                  }
                  10%,
                  30%,
                  50%,
                  70%,
                  90% {
                    -webkit-transform: translateX(-5px);
                    transform: translateX(-5px);
                  }
                  20%,
                  40%,
                  60%,
                  80% {
                    -webkit-transform: translateX(5px);
                    transform: translateX(5px);
                  }
                }
                img {
                  width: 23px;
                  height: 28px;
                }
              }
            }
          }
          .formItem:first-child .initHover {
            color: #438dee;
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
          }
          .formItem :hover .formCenter {
            color: #438dee;
            -webkit-animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            animation: tracking-in-expand 1.2s
              cubic-bezier(0.215, 0.61, 0.355, 1) infinite both;
            @-webkit-keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
            @keyframes tracking-in-expand {
              0%,
              100% {
                opacity: 1;
              }
              50% {
                opacity: 0.4;
              }
            }
          }
          .page {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            .pagination {
              margin: 0;
              /deep/.page-item {
                .page-link {
                  font-size: 22px;
                  background: #000;
                  color: #fff;
                  padding: 19px 38px;
                  border: none;
                }
                .page-link:focus {
                  box-shadow: 0px 0px 10px #438dee;
                }
              }
              /deep/ .active {
                .page-link {
                  color: #438dee;
                }
              }
            }
            .toPage {
              display: flex;
              align-items: center;
              justify-items: center;
              .goInput {
                margin: 0 20px;
                width: 80px;
                height: 35px;
                text-align: center;
                background: #000;
                color: #fff;
              }
              .btn {
                padding: 19px 38px;
                font-size: 22px;
                border-radius: 0;
              }
              .btn:focus {
                color: #fff;
                box-shadow: 0px 0px 10px #438dee;
              }
            }
          }
        }
        .detail {
          display: flex;
          flex-direction: column;
          width: 329px;
          height: 190px;
          .isShowImgs {
            -webkit-animation: swing-in-left-bck 1.5s
              cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
            animation: swing-in-left-bck 1.5s
              cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
            @-webkit-keyframes swing-in-left-bck {
              0% {
                -webkit-transform: rotateY(-90deg);
                transform: rotateY(-90deg);
                -webkit-transform-origin: left;
                transform-origin: left;
                opacity: 0;
              }
              100% {
                -webkit-transform: rotateY(0);
                transform: rotateY(0);
                -webkit-transform-origin: left;
                transform-origin: left;
                opacity: 1;
              }
            }
            @keyframes swing-in-left-bck {
              0% {
                -webkit-transform: rotateY(-90deg);
                transform: rotateY(-90deg);
                -webkit-transform-origin: left;
                transform-origin: left;
                opacity: 0;
              }
              100% {
                -webkit-transform: rotateY(0);
                transform: rotateY(0);
                -webkit-transform-origin: left;
                transform-origin: left;
                opacity: 1;
              }
            }
          }
          .imgitem {
            margin-bottom: 21px;
            img {
              width: 329px;
              height: 190px;
            }
          }
          .imgitem:first-child {
            margin-top: 21px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .Application {
    .main {
      // min-height: 1200px;
      .path1 {
        // padding: 0 40px;
        height: auto;
        // min-height: 550px;
        .title1 {
          margin-top: 120px;
        }
        .text1 {
          margin-bottom: 120px;
        }
        .apps {
          img {
            height: 120px;
            width: 210px;
          }
        }
        .point3 {
          margin-bottom: 80px;
        }
      }
      .path2 {
        // padding: 0 40px;
        margin: -60px 20px 0 20px;
        .bg2 {
          .appform {
            padding: 20px;
            margin-right: 0;
            // margin-top: -60px;
            margin-bottom: 21px;
            .formItem {
              .content {
                .formLeft {
                  img {
                    max-width: none;
                  }
                }
                .formCenter {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  .title {
                    font-size: 32px;
                  }
                  .desc {
                    font-size: 26px;
                    width: auto;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin-right: 20px;
                  }
                }
                .formRight {
                  img {
                    max-width: none;
                  }
                }
              }
            }
            .formItem:first-child .initHover {
              color: #fff;
              -webkit-animation: none;
              animation: none;
            }
            .page {
              font-size: 26px;
              .totalPage {
                display: none;
              }
              .pagination {
                margin: 0;
                /deep/.page-item {
                  .page-link {
                    font-size: 26px;
                  }
                }
              }
              .toPage {
                span {
                  font-size: 26px;
                }
                .btn {
                  font-size: 26px;
                }
              }
            }
          }
          .detail {
            display: none;
          }
        }
      }
    }
  }
}
</style>